import { imgPath } from "@/common/utils";
import dayjs from "dayjs";
import { defineComponent, ref, onMounted, computed, reactive } from "vue";
import styles from "./branchnew.module.less";
import Popup from "./popup/popup";
export default defineComponent({

  setup() {
    const state = ref({
      last_day: '',  //最后一天
      days: '',    //剩余天数
      insurance_start_date: '',
      business_license_start: '', //营业执照
      business_license_end: '',
      is_indefinitely: true,
    } as any)
    //获取时间
    const getDate = () => {
      let nowTime = new Date();
      let YYYY = nowTime.getFullYear();
      state.value.last_day = YYYY + '-' + '12' + '-' + '31';
      state.value.insurance_start_date = dayjs().format();
      state.value.days = Math.ceil(Math.abs(new Date(state.value.last_day).getTime() - new Date(state.value.insurance_start_date).getTime()) / (24 * 60 * 60 * 1000));
    }
    onMounted(() => {
      getDate()
    })
    const tableState = reactive({
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "70px",
        },
        {
          title: "省",
          dataIndex: "province",
          align: "center",
          width: "70px",
        },
        {
          title: "市",
          dataIndex: "city",
          align: "center",
          width: "70px",
        },
        {
          title: "分社名称",
          dataIndex: "branchName",
          align: "center",
          width: "110px",
        },
        {
          title: "地址",
          dataIndex: "address",
          align: "center",
          width: "110px",
        },
        {
          title: "联系姓名",
          dataIndex: "linker-name",
          align: "center",
          width: "110px",
        },
        {
          title: "联系电话",
          dataIndex: "tell",
          align: "center",
          width: "110px",
        },
        {
          title: "统一社会信息编码",
          dataIndex: "code",
          align: "center",
          width: "145px",
        },
        {
          title: "操作",
          dataIndex: "operate",
          align: "center",
          width: "90px",
        },
      ],
      list: [],
      selectedRowKeys: [],
      total: 24,
      pagination: {
        total: 1,
        current: 1,
        pageSize: 10,
        position: "bottomCenter",
      },
    } as any)
    //选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      tableState.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: tableState.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      }
    })
    //添加分社
    const ClickAddBranch = () => {
      popupRef.value.open()
    }
    //删除分社
    const cancel = () => {

    }
    //上传分社
    const upload = () => {

    }
    //下载分社
    const download = () => {

    }
    const during_date = () => {
      state.value.days = Math.ceil(Math.abs(new Date(state.value.last_day).getTime() - new Date(state.value.insurance_start_date).getTime()) / (24 * 60 * 60 * 1000));
    }
    const popupRef = ref(null as any)
    return () => (
      <div class={styles.branchnew}>
        <div class={styles['header-box']}>分社变更</div>
        <div class={styles.container}>
          <div class={styles['form-box']}>
            <a-form model={state.value}>
              <a-form-item
                label="保险起止日期"
                name="date"
              >
                <a-date-picker v-model:value={state.value.insurance_start_date} style={{ width: '220px', height: '40px' }} valueFormat="YYYY-MM-DD" change={during_date()} />
                - {state.value.last_day}共<span class={styles.days}>{state.value.days}</span>天
              </a-form-item>
              <div class={styles.tips}>
                <p>当天<span>0</span>时起</p>
                <p>当天<span>24</span>时止</p>
              </div>
              <a-form-item
                label="营业执照"
                required
              >
                <a-date-picker v-model:value={state.value.during_start} style={{ width: '200px', height: '40px' }} />
                <span style={{ margin: '0 3px' }}>至</span>
                <a-date-picker v-model:value={state.value.during_end} style={{ width: '200px', height: '40px' }} placeholder='截至日期' />
                <a-checkbox style={{ marginLeft: '5px' }} v-model:checked={state.value.is_indefinitely}><span class={styles.indefinitely}>无期限</span></a-checkbox>
              </a-form-item>
            </a-form>
          </div>
          <div class={styles['table-box']}>
            <div class={styles['table-title']}>
              <div>投保分社信息</div>
              <div class={styles['action-bar']}>
                <div class={styles['action-bar-item']} onClick={() => { ClickAddBranch() }}>
                  <img src={imgPath('/userCenter/actionBarItem1.png')} />
                  <span>手动添加分社</span>
                </div>
                <div class={styles['action-bar-item']} onClick={() => { cancel() }}>
                  <img src={imgPath('/userCenter/actionBarItem2.png')} />
                  <span>批量删除分社</span>
                </div>
                <div class={styles['action-bar-item']} onClick={() => { upload() }}>
                  <img src={imgPath('/userCenter/actionBarItem3.png')} />
                  <span>批量上传分社</span>
                </div>
                <div class={styles['action-bar-item']} onClick={() => { download() }}>
                  <img src={imgPath('/userCenter/actionBarItem4.png')} />
                  <span>下载批量上传模板</span>
                </div>
              </div>
            </div>
            <a-table
              columns={tableState.columns}
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={tableState.list}
              row-selection={rowSelection.value}
              rowKey="id"
            ></a-table>
          </div>
          <div class={styles['footer-box']}>
            <div class={styles.btn}>提交批单申请清单</div>
          </div>
        </div>
        <Popup ref={popupRef} />
      </div>
    )
  }
})